<template>
  <Table :isShowPagination="false" :data="dataList">
    <el-table-column
      v-for="(item, index) in state.columnList"
      :key="index"
      :label="item.label"
      :prop="item.prop"
    >
      <template #default="scope">
        <template v-if="scope.row.edit">
          <!-- <el-form-item
              :prop="'params.' + scope.$index + '.' + item.prop"
              :rules="addJsonForm.addJsonRules[item.prop]"
            > -->
          <el-input type="text" v-model="scope.row[item.prop]" autocomplete="off"></el-input>
          <!-- </el-form-item> -->
        </template>
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <!-- 全局控制的编辑 -->
        <div v-if="scope.row.add == undefined" style="display: inline-block">
          <!-- 编辑 -->
          <el-button
            link
            v-if="!scope.row.edit"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            >编辑</el-button
          >
          <!-- 保存 -->
          <el-button
            link
            type="success"
            :plain="true"
            v-if="scope.row.edit"
            @click="handleSave(scope.$index, scope.row)"
            >保存</el-button
          >
        </div>
        <!-- 添加控制 -->
        <!-- <div v-if="scope.row.add != undefined && scope.row.add">
            <el-button
              link
              type="success"
              :plain="true"
              v-if="scope.row.edit"
              @click="handleSave(scope.$index, scope.row)"
              >Save</el-button
            >
          </div> -->
      </template>
    </el-table-column>
  </Table>
</template>

<script setup>
import Table from '@renderer/components/table/Table.vue'
import { useUserStore } from '@renderer/stores/user'
const userStore = useUserStore()
import { useUserDB } from '@renderer/database/useUserDB'
const { updateUserOptionInfo, getCurrentUser } = useUserDB()
const props = defineProps({
  activeName: {
    type: String,
    default: 'A4'
  },
  data: Object
})

const state = reactive({
  columnList: [
    {
      label: '单双面',
      prop: 'type'
    },
    {
      label: '颜色',
      prop: 'color'
    },
    {
      label: '普通纸成本（元/张）',
      prop: 'normalPage'
    },
    {
      label: '护眼纸成本（元/张）',
      prop: 'protectionPage'
    },
    {
      label: '耗材成本（元/张）',
      prop: 'consumables'
    },
    {
      label: '售价（元/张）',
      prop: 'price'
    }
  ]
})
const dataList = computed(() => {
  let info = JSON.parse(JSON.stringify(userStore.optionInfo))
  console.log(info)

  return info[props.activeName]
})

function handleEdit(index, row) {
  row.edit = true
}
async function handleSave(index, row) {
  row.edit = false
  let optionList = userStore.optionInfo[props.activeName]
  optionList[index] = row

  let user = await getCurrentUser()
  updateUserOptionInfo(user.userName, userStore.optionInfo)
}
</script>

<style lang="scss" scoped></style>
